<template>
    <div class="app" id="lkfgl1">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <businessL/>
                <div class="conres">
                  <div class="ra"><h3>消息设置</h3></div>
                  <div class="yuansdj">
                    <div>开场白设置</div>
                    <el-form ref="form" label-width="100px">
                      <el-form-item label="开场白文案:">
                        <el-input type="textarea" v-model="descs"></el-input>
                      </el-form-item>
                    </el-form>
                    <p>建议字数控制在30字以内</p>
                    <div class="btns">
                      <el-button type="danger">保存</el-button>
                      <el-button>填充</el-button>
                    </div>
                  </div>
                  <p class="lzdy">自定义设置</p>
                  <el-row style="line-height:40px">
                    <el-col :span="4" style="text-indent: 10px;">
                      常见问题
                    </el-col>
                    <el-col :span="4">
                      <el-button @click="dialogVisible = true">+添加自定义问题</el-button>
                    </el-col>
                    <el-col :span="16" style="text-align: right;">
                      <div>最多可以添加10个问题，最多可以启用其中的5个</div>
                    </el-col>
                  </el-row>
                  <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}"
                    style="width: 100%;height:250px;border:solid 1px rgb(220,220,220)"
                    >
                    <el-table-column label="是否启用" width="100">
                      <el-checkbox></el-checkbox>
                    </el-table-column>
                    <el-table-column
                      label="序号"
                      width="150">
                      <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="点击率"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="问题"
                      show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="回复"
                      show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="编辑">
                      <template>
                        <el-button size="mini">修改</el-button>
                        <el-button size="mini" type="danger">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <p class="lzdy">店铺离线自动回复</p>
                  <div style="margin:0px 10px;width:500px">
                    <p>店铺没有客服在线时，买家发消息，会自动回复买家以下内容</p>
                    <el-input type="textarea" v-model="descs"></el-input>
                    <div class="btns">
                      <el-button type="danger">保存</el-button>
                      <el-button>修改</el-button>
                    </div>
                  </div>
                  <businessF/>
                </div>
              </div>
            </div>
        </div>
        <Footer/>
        <el-dialog
          :visible.sync="dialogVisible"
          width="450px"
          :before-close="handleClose">
          <div class="lheds">添加自定义问题</div>
          <el-form ref="form" label-width="80px">
            <el-form-item label="设置问题">
              <el-input style="width:300px" v-model="issue"></el-input>
            </el-form-item>
            <el-form-item label="回答">
              <el-input style="width:300px" v-model="answer"></el-input>
            </el-form-item>
          </el-form>
          <el-button style="margin: 0 auto;display: block;" type="primary" @click="dialogVisible = false">确 定</el-button>
          <div style="height:15px"></div>
        </el-dialog>
    </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessL from '@/components/businessL'
import businessF from '@/components/businessF'
export default {
    components: { 
    merchantHeader,
    Footer,
    businessL,
    businessF
    },
    data() {
      return {
        descs:"",
        dialogVisible:false,
        answer:"",
        issue:"",
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
      
    },
    methods: {
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    },
}
</script>
<style lang="stylus">
#lkfgl1 /deep/  .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
#lkfgl1{
.yuansdj /deep/ .el-button--primary:hover {
    background: #fdab9c;
    border-color: #fdab9c;
}
.yuansdj /deep/ .el-button--primary {
    color: #FFF;
    background-color: #ff9381;
    border-color: #ff9381;
}
.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff
}
.conres .ra h3{
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  border-bottom: 1px solid #cecece;
  margin-top: 15px;
  padding-bottom: 10px;
}
.yuansdj {
  width: 500px;
  margin-top: 20px;
  margin-left: 20px;
}
.lzdy{
  font-size: 17px;
  margin: 10px 0px;
  color: black;
  border-top: solid 1px rgb(220,220,220);
  text-indent: 10px;
}
.btns{
  margin: 10px auto;
  display: flex;
  justify-content: space-around;
  width: 60%;
}
.el-dialog__header{
  padding: 0px !important;
}
.el-dialog__body{
  padding: 0px !important;
}
.lheds{
  width: 100%;
  height: 60px;
  background-color: rgb(240, 96, 72);
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}
}
</style>